<template>
	<div style="height: 100%;">
		<el-container style="height: 100%;">
			<el-aside>
				<el-menu @select="select" style="height: 100%;" default-active="1" class="el-menu-vertical-demo" background-color="#304156" text-color="#ffffff" @open="handleOpen"
      @close="handleClose" :collapse="isCollapse">
					<el-menu-item index="/admin">
						<i class="el-icon-s-home"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					
					<el-submenu index="用户管理:/user/account">
						<template slot="title">
							<i class="el-icon-user-solid"></i>
							<span slot="title">用户管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="账号列表:/user/account"><i class="el-icon-user"></i>账号列表</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="仓库与门店管理:/stores_and_warehouses/stores">
						<template slot="title">
							<i class="el-icon-s-cooperation"></i>
							<span slot="title">仓库与门店管理</span>
							
						</template>
						<el-menu-item-group>
							
							<el-menu-item index="仓库管理:/stores_and_warehouses/stores"><i class="el-icon-house"></i>仓库管理</el-menu-item>
							<el-menu-item index="门店管理:/stores_and_warehouses/warehouses"><i class="el-icon-discount"></i>门店管理</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="类别管理:/category/primary">
						<template slot="title">
							<i class="el-icon-s-help"></i>
							<span slot="title">类别管理</span>
						</template>
						<el-menu-item-group>
							
							<el-menu-item index="大类管理:/category/primary"><i class="el-icon-ice-tea"></i>大类管理</el-menu-item>
							<el-menu-item index="小类管理:/category/subclass"><i class="el-icon-apple"></i>小类管理</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="商品管理:/goods/brand">
						<template slot="title">
							<i class="el-icon-s-goods"></i>
							<span slot="title">商品管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="品牌列表:/goods/brand"><i class="el-icon-reading"></i>品牌列表</el-menu-item>
							<el-menu-item index="商品信息:/goods/goods"><i class="el-icon-house"></i>商品信息</el-menu-item>
							<el-menu-item index="商品属性:/goods/attribute"><i class="el-icon-present"></i>商品属性</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu  index="渠道商管理:/channel/channel">
						<template slot="title">
							<i class="el-icon-s-flag"></i>
							<span slot="title">渠道商管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="渠道商:/channel/channel"><i class="el-icon-coffee-cup"></i>渠道商</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
				</el-menu>
			</el-aside>
			  
			<el-container>
				<el-header>
					<div @click="changeCollapse()" style="float: left;">
						<i class="el-icon-s-operation"></i>
					</div>
					<div style="float: left; width: auto; ">
						<el-breadcrumb separator-class="el-icon-arrow-right" style=" line-height: 60px; margin-left: 10px;">
							<el-breadcrumb-item><font style="cursor: pointer;"><font @click="home()">首页</font></font></el-breadcrumb-item>
							<el-breadcrumb-item  v-for="path in routerPath"><font style="cursor: pointer;">{{path.title}}</font></el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					
					<div style="float:right;width: auto;margin-right: 6%;">
						<el-dropdown :hide-on-click="false">
							<span class="el-dropdown-link">
								<div style="line-height: 60px;">
									<el-avatar style="margin-top: 16px;" shape="square" :size="30" :src="this.user.photo"></el-avatar>
									<div style="float: right; margin-left: 10px; font-size: 20px;">
										<font>{{this.user.username}}</font>
									</div>
								</div>
							</span>
						
							<el-dropdown-menu slot="dropdown">
							<font @click="home()"><el-dropdown-item>HOME</el-dropdown-item></font>
							<font @click="logout()"><el-dropdown-item divided>退出</el-dropdown-item></font>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-header>
				
				<el-main><router-view /></el-main>
			</el-container>
		</el-container>
	</div>
</template>


<script>

export default {
	name: 'Admin',
	data() {
	    return {
			user: {
			  username:null,
			  photo:null	
			},
			
			primaryPath: [
				{title: "用户管理", url: "/user/account"},
				{title: "仓库与门店管理", url: "/stores_and_warehouses/stores"},
				{title: "类别管理", url: "/category/primary"},
				{title: "商品管理", url: "/goods/brand"},
				{title: "渠道商管理", url: "/channel/channel"}
			],
	        isCollapse: true,
			//面包屑
			routerPath: [],
			squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
	    }
	},
	
	methods: {
		// jump(path) {
		// 	console.log(path.url);
		// 	if(this.routerPath.length > 1) {
		// 		if(path.url == this.routerPath[0].url) {
		// 		}
		// 	}
		// },
		logout(){
				this.$http.get("/logout");
				this.$message({
					message: '注销成功！',
					type: 'warning'
				});
				},
		//获取用户
		getuser(){
			this.$http.post("/user/getuser")
				.then((resp) => {
					this.user.username=resp.data.data.username;
					this.user.photo=resp.data.data.photourl;
				}).catch(function(error) {
					console.log(error);
				})
		},
		home(){
			this.routerPath = [];
			this.$router.push("/admin");
		},
		//展开关闭菜单栏
		changeCollapse() {
			if(this.isCollapse) {
				this.isCollapse = false;
			}else {
				this.isCollapse = true;
			}
		},
		handleOpen(key, keyPath) {
			this.routerPath = [];
			let path = this.spliceName(key);
			this.routerPath.push(path);
		},
		handleClose(key, keyPath) {
			if(this.routerPath.length > 1) {
				this.routerPath.pop();
			}
		    console.log(key, keyPath);
		},
		//跳转页面
		select(key) {
			if(key == '/admin'){
				this.routerPath = [];
				this.$router.push(key);
			}else {
				let bool = true;
				let path = this.spliceName(key);
				if(this.routerPath.length == 1) {
					this.routerPath.push(path);
					this.$router.push(key.split(':')[1]);
				}else {
					for(let p of this.routerPath) {
						//重复点击
						if(p.title == path.title) {
							bool = false;
						}
					}
		//没有重复点击
		if(bool) {
			for(let r of this.primaryPath) {
					let pUrl = path.url;
					let rUrl = r.url;
					if((pUrl || '').split("/")[1] == rUrl.split('/')[1]) {
					this.routerPath = [];
					this.routerPath.push(r);
					this.routerPath.push(path);
					this.$router.push(key.split(':')[1]);
					break;
							}
						}
					}
				}
				
				
			}
		},
		
		//分割名称与路由
		spliceName(key) {
			let k = key.split(":")[0];
			let v = key.split(":")[1];
			let path = {};
			path.title = k;
			path.url = v;
			return path;
		}
	},
	
	created() {
		this.getuser()
		  
	}
  
}
</script>

<style>
	
	.el-header > div{
		font-size: 25px;
		height: 100%;
		width: 50px;
		line-height: 60px;
		cursor: pointer;
		text-align: center;
	}
	
	.el-header{
		position: relative;
		padding: 0 ! important;
	    color: #333;
	    line-height: 60px;
		-webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
	}
	  
	.el-aside {
		width: auto ! important;
	}
		
	.el-menu {
		height: 80%;
		width: 100%;
	}
	  
	body > .el-container {
	    margin-bottom: 40px;
	}
	
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 400px;
	}
</style>